<template>
  <el-dialog title="选择爬取数据源" :visible="dialogVisible" :width="mobileView ? '90%' : '300px'" :fullscreen="smallMobileView" @close="handleClose">
    <div class="crawl-options">
      <el-button type="success" icon="el-icon-download" @click="handleCrawl('shanghai')">爬取上海铝价</el-button>
      <el-button type="warning" icon="el-icon-download" @click="handleCrawl('changjiang')">爬取长江铝价</el-button>
    </div>
    <div slot="footer" v-if="mobileView" class="dialog-footer mobile-footer">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'CrawlDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    mobileView: {
      type: Boolean,
      default: false
    },
    smallMobileView: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisible() {
      return this.visible;
    }
  },
  methods: {
    handleCrawl(source) {
      this.$emit('crawl', source);
      this.$emit('update:visible', false);
    },
    handleClose() {
      this.$emit('update:visible', false);
    }
  }
}
</script> 